import { ConnectRule, h, RectNode, RectNodeModel } from '@logicflow/core';
import { NodeTextTheme } from '@logicflow/core/types/constant/DefaultTheme';
import { defaultConfig } from './config';

export class BaseOutModel extends RectNodeModel {
  initNodeData(data: any): void {
    super.initNodeData(data);
    this.width = 80;
    this.height = 60;
    this.text.value = 'Out';
    this.text.y = this.text.y + 20;

    const connectRule: ConnectRule = {
      message: '不允许从出节点指向入节点',
      validate: (sourceNode, targetNode, sourceAnchor, targetAnchor) => {
        return false;
      },
    };
    this.sourceRules.push(connectRule);
  }

  getNodeStyle(): {
    [x: string]: any;
    fill?: string | undefined;
    stroke?: string | undefined;
    strokeWidth?: number | undefined;
  } {
    const style = super.getNodeStyle();
    style.fill = 'rgb(73,76,77)';
    style.stroke = this.isSelected ? 'rgb(38,134,255)' : '#000';
    return style;
  }

  getTextStyle(): NodeTextTheme {
    const style = super.getTextStyle();
    style.color = '#fff';
    return style;
  }

  setAttributes(): void {
    this.isAnimation = true;
  }

  getEdgeAnimationStyle() {
    const style = super.getEdgeAnimationStyle();
    style.strokeDasharray = '5 5';
    style.animationDuration = '10s';
    return style;
  }

  getDefaultAnchor(): { x: number; y: number; id: string; type: string; edgeAddable: boolean }[] {
    const { height, x, y, id } = this;
    return [
      {
        x,
        y: y - height / 2,
        type: 'top',
        edgeAddable: true,
        id: `${id}_top`,
      },
    ];
  }
}

export class BaseOutView extends RectNode {
  getIcon() {
    const { x, y } = this.props.model;
    const width = 30;
    const height = 40;
    return h('image', {
      width,
      height,
      x: x - width / 2,
      y: y - height / 2 - 5,
      href: defaultConfig.icon.href,
    });
  }

  /**
   * 完全自定义节点外观方法
   */
  getShape() {
    const { model } = this.props;
    const { x, y, width, height } = model;
    const style = model.getNodeStyle();
    return h('g', {}, [
      h('rect', {
        ...style,
        x: x - (width - 50) / 2,
        y: y - height / 2,
        rx: 2,
        ry: 2,
        width: 30,
        height,
      }),
      h('rect', {
        ...style,
        x: x - 80 / 2,
        y: y - height / 2 + 10,
        rx: 4,
        ry: 4,
        width: 80,
        height: 50,
      }),
      this.getIcon(),
    ]);
  }
}
